<#escape x as (x)!?html>
    <#import "/page/Utils.ftl" as utils/>
    <#import "/page/synxisadapter/EnumUtils.ftl" as enumUtils/>
<head>
    <script type="text/javascript">
        var menuId = "Monitor_Log";

        $(function() {
            $("#afterDate,#beforeDate").datepicker(
                    $.extend({}, $.datepicker.regional[""],
                    {
                        beforeShow : function(input) {
                            return {
                                minDate: (input.id == "beforeDate" ? $("#afterDate").datepicker("getDate") : null),
                                maxDate: (input.id == "afterDate" ? $("#beforeDate").datepicker("getDate") : null)
                            };
                        },
                        dateFormat: "yy-mm-dd",
                        showOn: "both",
                        buttonImage: "${request.contextPath}/contrib/jquery/datepicker/calendar.gif",
                        buttonImageOnly: true
                    }));
        });

        function viewDetail(e) {
            var tr = e.parent().parent();
            var id = tr.find("input[@name='id']").val();

            $("#viewDetailForm").find("input[@name='id']").val(id);
            $("#viewDetailForm").submit();
        }

    </script>
</head>
<body>

<form id="viewDetailForm" method="GET" action="view.action" target="_blank">
    <input type="hidden" name="id"/>
</form>

<table>
    <caption>
        <div class="tools border">Query Logs:
        </div>
    </caption>
</table>
<table>
    <caption>
        <div class="tools border">
            <form id="mainForm" action="query!query.action" method="GET">
                <input name="page" type="hidden"/>
                <input name="count" type="hidden"/>
                <table class="form_table">
                    <tr>
                        <td class="key">Type:&nbsp;</td>
                        <td class="value"><select class="select" name="condition.operationType">
                            <option value="">ALL</option>
                            <#list enumUtils.enumOperationType() as type>
                                <option value="${type}" ${(condition.operationType==type)?string("selected='selected'","")}>${type}</option>
                            </#list>
                        </select></td>
                        <td class="key">Range:</td>
                        <td class="value"><input id="afterDate" type="text" class="text" name="condition.after"
                                                 value="${condition.after?string('yyyy-MM-dd')}"></td>
                        <td class="key">----------</td>
                        <td class="value" colspan="3"><input id="beforeDate" type="text" class="text"
                                                             name="condition.before"
                                                             value="${condition.before?string('yyyy-MM-dd')}">
                        </td>
                    </tr>
                    <tr>
                        <td class="key">Response&gt;:(ms)&nbsp;</td>
                        <td class="value">
                            <input type="text" class="text" name="condition.timespan"
                                   value="${condition.timespan?string('0')}">
                        </td>
                        <td class="key">Key Word</td>
                        <td class="value" colspan="3"><select class="select" name="condition.direction">
                            <option value="">ALL</option>
                            <#list enumUtils.enumDirection() as direction>
                                <option value="${direction}" ${(condition.direction==direction)?string("selected='selected'","")}>${direction}</option>
                            </#list>
                        </select><input type="text" class="text"
                                        name="condition.keyWord" value="${condition.keyWord?html}">
                        </td>
                        <td class="key">HasError:&nbsp;</td>
                        <td class="value">
                            <select class="select" name="condition.errorFilter">
                                <#list enumUtils.enumErrorFilter() as type>
                                    <option value="${type}" ${(condition.errorFilter==type)?string("selected='selected'","")}>${type}</option>
                                </#list>
                            </select> &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="10" align="right"><input type="submit" value="Search" class="btn"></td>
                    </tr>
                </table>
            </form>
        </div>

    </caption>
    <thead>
    <tr>
        <th>ID</th>
        <th>Time</th>
        <th>Type</th>
        <th>HasError</th>
        <th>Timespan</th>
        <th>Operation</th>
    </tr>
    </thead>
    <tbody>
        <#list transactionLogs as transactionLog>
        <tr class="${(transactionLog_index%2==0)?string('even','odd')} ${(transactionLog.error)?string('red','')}">
            <td align="right">${transactionLog.id}<input type="hidden" name="id" value="${transactionLog.id}"/>&nbsp;</td>
            <td>${transactionLog.timestamp?datetime}&nbsp;</td>
            <td>${transactionLog.operationType}&nbsp;</td>
            <td>${transactionLog.error?string('Yes','No')}&nbsp;</td>
            <td align="right">${transactionLog.timespan}ms</td>
            <td><input type="button" value="ViewDetail" class="btn" onclick="viewDetail($(this))"/>&nbsp;</td>
        </tr>
        </#list>
    <tbody>
    <tfoot>
        <#if paginator?exists>
        <tr>
            <td colspan="100" class="tools">
                <div class="paginator">
                <@utils.paging paginator "navigate" 20/>
                    <script type="text/javascript">
                        function navigate(page, count) {
                            $("#mainForm > input[name='page']").val(page);
                            $("#mainForm > input[name='count']").val(count);
                            $("#mainForm").submit();
                        }
                    </script>
                </div>
                &nbsp;</td>
        </tr>
        </#if>
    </tfoot>
</table>
</body>
</#escape>